<template>
  <div class="awaitBatch">
    <SearchBar class="form" @onSearch="handleSearch" @childFn="resetForm">
      <SearchBarItem label="商品编码(必填)：" :labelLg="8">
        <Input type="text" v-model="searchModule.productCode" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="主订单号：" :labelLg="8">
        <Input type="text" v-model="searchModule.orderId" placeholder="请输入" clearable />
      </SearchBarItem>

      <SearchBarItem label="交易时间：" :labelLg="8">
        <DatePicker type="daterange" class="timeWidth" ref="createSettlementDatePicker" transfer :value="searchModule.verificationTime" split-panels placeholder="请选择" @on-change="searchTime"></DatePicker>
      </SearchBarItem>

      <!-- <SearchBarItem label="异常状态：" :labelLg="8">
        <Select v-model="searchModule.isException" placeholder="请选择" :clearable="isClear">
          <Option :value="item.key" v-for="(item, key) in selectException" :key="key">{{item.value}}</Option>
        </Select>
      </SearchBarItem> -->
      <!-- <SearchBarItem label="清分规则：" :labelLg="8">
        <Select v-model="searchModule.clearingRule" placeholder="请选择" :clearable="isClear">
          <Option :value="item.key" v-for="(item, key) in selectClearRule" :key="key">{{item.value}}</Option>
        </Select>
      </SearchBarItem> -->
      <SearchBarItem label="清分渠道：" :labelLg="8">
        <Select v-model="searchModule.payChannelCode" placeholder="请选择" :clearable="isClear">
          <Option :value="item.key" v-for="(item, key) in selectPayChannel" :key="key">{{item.value}}</Option>
        </Select>
      </SearchBarItem>
    </SearchBar>

    <h3 class="title">账单列表</h3>
    <Table class="tables" border :columns="columns" :data="tableData" @on-selection-change="selectionList"></Table>

    <h3 class="title">规则列表</h3>
    <Table class="tables" border :columns="columnsList" :data="ruleTableDataList"></Table>

    <h3 class="title">操作</h3>
    <Button type="primary" @click="bandleMatchBtn">匹配规则</Button>
  </div>
</template>

<script>
import {
  Button,
  Input,
  Message,
  Form,
  FormItem,
  DatePicker,
  Select,
  Option,
  Table,
  Radio
} from "view-design";
import SearchBar from "@/components/SearchBar";
import { namespace } from "../Module/awaitBillClearingModule";
import config from "@/utils/config";
import appService from "@/utils/appService";

export default {
  name: "clearing_proces",
  components: {
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Button,
    Input,
    Message,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Table,
    Radio
  },
  data() {
    return {
      namespace: namespace,
      isDisabledloadBtn: false, /** 控制加载更多按钮 **/
      currentPage: 1, /** 用来控制加载更新 **/
      batchData: [], /** 多选选中 */
      isClear: true,
      loading: true,
      searchModule: {},
      selectId: [], /** 账单id */
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: "序号",
          align: "center",
          type: 'index'
        },
        {
          title: "子订单号",
          key: "subOrderId",
          align: 'center'
        },
        {
          title: "主订单号",
          key: "orderId",
          align: 'center'
        },
        {
          title: "商品名称",
          key: "productName",
          align: 'center'
        },
        {
          title: "商品编号",
          key: "productCode",
          align: 'center'
        },
        {
          title: "清分渠道",
          key: "payChannelCodeCn",
          align: 'center'
        },
        {
          title: "清分规则名称",
          key: "ruleName",
          align: 'center'
        },
        {
          title: "核销时间",
          key: "verifiedTime",
          align: 'center'
        }
      ],
      tableData: [], /** 账单列表list */
      currentChoose: 0, /** 规则code */
      columnsList: [
        {
            title: '选择',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.ruleCode;
              let flag = false;
              if (this.currentChoose === id) {
                flag = true
              } else {
                flag = false
              }
              let self = this
              return h('div', [
                h(Radio, {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      self.currentChoose = id;
                    }
                  }
                })
              ])
            }
          },
        {
          title: "序号",
          align: "center",
          type: 'index'
        },
        {
          title: "规则名称",
          align: "center",
          key: 'ruleName'
        },
        {
          title: "规则类型",
          key: "ruleTypeCn",
          align: 'center'
        },
        {
          title: "结算类型",
          key: "settlementTypeCn",
          align: 'center'
        },
        {
          title: "状态",
          key: "settlementStatusCn",
          align: 'center'
        },
        {
          title: "规则生效时间",
          key: "effectiveDate",
          align: 'center'
        },
        {
          title: "规则失效时间",
          key: "expireDate",
          align: 'center'
        }
      ],
      selectException: [
        {
          key: 1,
          value: '异常'
        },
        {
          key: 0,
          value: '正常'
        }
      ], /** 异常状态 */
      ruleTableDataList: [], /** 规则列表list */
      selectClearRule: [], /** 清分规则 字典 */
      selectPayChannel: [] /** 清分渠道 字典 */
    };
  },
  created() {
    // this.getRuleList();
    this.getKey();
  },
  mounted() {
  },
  methods: {
    /** 多选 */
    selectionList (data) {
      if (data.length) {
        this.selectId = [];
        for (let i = 0; i < data.length; i++) {
          this.selectId.push(data[i].subOrderId);
        }
      }
    },

    /** 匹配规则  W256919 */
    async bandleMatchBtn () {
      if (this.selectId == '') {
        this.$Message.error({
          content: '请选择账单列表'
        });
        return;
      }
      if (!this.currentChoose) {
        this.$Message.error({
          content: '请选择规则列表'
        });
        return;
      }

      try {
        let params = {
          ruleCode: this.currentChoose,
          subOrderIds: this.selectId
        }
        let res = await this.$store.dispatch(`${namespace}/getMatchDispose`, params);
        this.$Message.success({
          content: res.data.msg
        });
        this.$router.push({ path: 'awaitBill', puery: {

        }})

      } catch (error) {
        this.$Message.error({
          content: error
        });
      }

    },

    // 交易时间
    searchTime (date, type) {
      this.searchModule.payTimeBegin = date ? date[0] : '';
      this.searchModule.payTimeEnd = date ? date[1] : '';
    },

    /** 搜索 */
    async handleSearch() {
      try {

          if( !this.searchModule.productCode ) {
              this.$Message.error({
                  content: '商品编码必填，请输入！'
              });
              return;
          }

        let page = {
          currentPage: 1,
          pageSize: 100,
          isException: 1
        }
        let res = await this.$store.dispatch(`${namespace}/query`, { ...this.searchModule, ...page });
          this.tableData = res.data.list;

        let rulePage = {
          currentPage: 1,
          pageSize: 100
        }
        let resList = await this.$store.dispatch(`${namespace}/getRuleList`, { ...this.searchModule, ...rulePage });
          let data = resList.data.data.list;
          this.ruleTableDataList = data;
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    },

    /** 清分规则列表list  */
    async getRuleList () {
      try {
        let page = {
          currentPage: 1,
          pageSize: 10
        }
        let res = await this.$store.dispatch(`${namespace}/getRuleList`, { ...page });
        let data = res.data.data.list;
        this.ruleTableDataList = data;
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    },

    /** 字典  */
    async getKey () {
      try {
        let res = await this.$store.dispatch(`${namespace}/getKey`);
        let data = res.data.data;
        this.selectClearRule = data.settlementClearRule;
        this.selectPayChannel = data.payChannel;
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    },

    /** 列表选择 **/
    getListChecked(data){
      this.batchData = data;
    },

    onSortChange(sort) {
      if (sort.order === "normal") {
        this.queryParam.order = [];
      } else {
        this.queryParam.order = [sort.key + " " + sort.order];
      }
      this.handleSearch();
    },

    // 清空异常单事件
    resetForm () {
      this.$set(this.searchModule, 'productCode', ''); // 商户编码
      this.$set(this.searchModule, 'orderId', ''); // 主订单
      this.$set(this.searchModule, 'isException', ''); // 异常账单
      this.$set(this.searchModule, 'payChannelCode', ''); // 清分渠道
      this.$set(this.searchModule, 'clearingRule', ''); // 清分规则
      // 清空时间选择;
      this.$refs["createSettlementDatePicker"].handleClear();
    },

    /** 加载更多 **/
    async loadMore(){
      try {
        this.isDisabledloadBtn = true; // 每次请求都禁止按钮点击
        let obj = {
          currentPage: ++this.currentPage,
          pageSize: 100,
          isException: 0
        }
        let res = await this.$store.dispatch(`${namespace}/getMoreList`, { ...this.dataModule, ...obj });

        let listData = res.data.data.list;
        if (listData.length != 0) {
          this.$store.commit(`${namespace}/pushDataToList`, listData);
        } else {
          --this.currentPage;
        }
        this.isDisabledloadBtn = false;
      } catch (error) {
        this.$Message.error({
					content: error

        });
      }
    },
  },
  async mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
  }
};
</script>

<style lang="less">
.awaitBatch{
  .title {
    margin: 20px 0;
  }
  .timeWidth{
    width: 100%;
  }
  .loadMoreBtn {
    margin: 20px 0;
    text-align: center;
  }
}
</style>
